<template>
  <div>
    <div class="detail">
        <div class="detail_head">
            <div @click="go" class="go"><svg t="1656486369074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3043" width="0.48rem" height="0.48rem"><path d="M671.968176 911.99957c-12.287381 0-24.576482-4.67206-33.951566-14.047144L286.048434 545.984249c-18.751888-18.719204-18.751888-49.12028 0-67.872168L638.016611 126.111222c18.751888-18.751888 49.12028-18.751888 67.872168 0 18.751888 18.719204 18.751888 49.12028 0 67.872168l-318.016611 318.047574L705.888778 830.047574c18.751888 18.751888 18.751888 49.12028 0 67.872168C696.544658 907.32751 684.255557 911.99957 671.968176 911.99957z" p-id="3044" fill="#ffffff"></path></svg></div>
            <div class="title">{{detailObj.title}}</div>
        </div>
        <div class="detail_box">

            <div class="row">
                <!-- <h2>{{detailObj.title}}</h2> -->
                <img :src="detailObj.picurl" alt=""> 
            </div>

            <div class="row2">
                <span>{{detailObj.description}}</span>
            </div>

            <div class="row3">
                <div v-html="detailObj.content"></div>
            </div>

            <!-- 解决显示NaN和undefined的问题：因为数据还没有回来，所以出现undefined的问题 -->
            <div class="row4" v-if="detailObj.className||''">
                <div class="item">发布日期：{{posttime+'日'}}</div>
                <div class="item">分类：{{detailObj.className}}</div>
                <div class="item">阅读量：{{detailObj.hits+'次'}}</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
// 时间戳-转换
import { myDate } from '@/util/dateConversion'
export default {
    name:'Detail',
    data() {
        return {
            query:{
                cid:5,
                id:215,
                type:''
            },
            detailObj:{}
        }
    },
    mounted(){
        this.query.cid=this.$route.query.cid
        this.query.id=this.$route.query.id
        this.query.type=this.$route.query.type
        this.getData()
       
    },
    methods:{
        async getData(){
            let result =await this.$api.getDetail(this.query)

            // 获取分类名称：
            const cid=result.data.classid;

            const resArr=await this.$api.listName()

            resArr.data.forEach(item=>{
                if(item.id==cid){
                    result.data.className=item.classname
                }

                if(cid==14){
                    result.data.className='灵感创意'
                }else if(cid==16)result.data.className='文章干货'
            })
            this.detailObj=result.data

        },
        go(){
            // 跳转到上一级路由
            this.$router.go(-1)
        }
    },
    computed:{
        posttime(){
            return myDate(this.detailObj.posttime,2)
        }
    }
    
}
</script>

<style lang="less" scoped>
.detail_head{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 970px;
    height: 1rem;
    background: #31c27c;
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    z-index: 9999;
    .title{
        color: white;
        font-size: .4rem;
        width: 100%;
        text-align: center;
        padding-right: .2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .go{
        display: flex;
    }
}
.detail_box{
    margin-top: 1rem;
    padding: .3rem;
    .row{
        font-size: .3rem;
        color: #333;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: .5rem;
        padding-bottom: 1rem;
        // border-bottom: 1px solid #f2f2f2;
        // h2{
        //     width: 60%;
        // }
        img{
            width: 80%;
            margin-right: .2rem;
        }
    }   
    .row2{
        font-size: .35rem;
        color: #999;
        padding-bottom: 1rem;
        line-height: 1.9em;//父标签的1.9倍
    }
    .row4{
        font-size: .28rem;
        color: #999;
        .item{
            line-height: 2;
        }
    }
}

</style>

<!-- 解决后台返回的页面结构，无法设置样式的问题
https://vip.kingdee.com/article/8700?productLineId=0
 -->
<style scoped>
/* >>>样式穿透 */
.row3 >>>img{
    max-width:100%;
    margin-bottom:0.1rem;
}
>>> pre {
    font-size: 0.12rem !important;
    transform: scale(0.8);
}
</style>